<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }
        #backImg {
            height: 100%;
            width: 100%;
            background-image: url('../picture/car.jpg');
            background-position: center;
            background-size: cover;
            position: relative;
        }
        #time {
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%);
            text-align: center;
        }
        #qText {
            font-size: 40px;
            color: azure;
        }
        #demo {
            color: azure;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div id="backImg">
        <div id="time">
            <p id="qText">距离2022年春节还有:</p>
            <hr>
            <p id="demo"></p>
        </div>
    </div>
</body>
<script>
    let newYear=new Date("2023,1,22").getTime();//获取过年的时间
    let countTime=setInterval(function(){//利用setInterval()，它会不停调用该函数
        let now=new Date().getTime();//获取现在的时间
        let distance=(newYear-now)/1000;//获得时间差
        var d=Math.floor(distance/60/60/24);
        var h=Math.floor(distance/60/60%24) ;
        var m=Math.floor(distance/60%60 );
        var s=Math.floor(distance % 60);
        d=d<10 ? "0"+d:d;//美观，出现00：00：00这样的样式
        h=h<10 ? "0"+h:h;
        m=m<10 ? "0"+m:m;
        s=s<10 ? "0"+s:s;
        document.getElementById("demo").innerHTML = d + "天" + h + "时"
            + m + "分" + s + "秒";
    })
</script>
</html>